<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <title th:text="${site.title}"></title>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

    <!-- DefaultCsrfToken -->
    <meta id="_csrf_token" th:content="${_csrf}?${_csrf.token}"/>
    <meta id="_csrf_header" th:content="${_csrf}?${_csrf.headerName}"/>

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="/AdminLTE/plugins/fontawesome-free/css/all.min.css">
    <!-- overlayScrollbars -->
    <link rel="stylesheet" href="/AdminLTE/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="/AdminLTE/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/AdminLTE/dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <style type="text/css">
        .sidebar-monokai, .sidebar-monokai .brand-link { background-color: #181915!important; }
        .navbar-monokai { background-color: #20211c; }
        .main-header, [class*='sidebar-monokai'] .brand-link, [class*='sidebar-monokai'] .user-panel {
            border-color: #3e3d32;
        }
    </style>
</head>
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed overflow-hidden">
    <div class="wrapper">
        <!-- Navbar -->
        <nav class="main-header navbar navbar-expand navbar-dark navbar-monokai">
            <!-- Left navbar links -->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" data-widget="pushmenu" href="javascript: void(0);" role="button"><i class="fas fa-bars"></i></a>
                </li>
            </ul>

            <!-- Right navbar links -->
            <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link" data-toggle="dropdown" href="javascript: void(0);">
                        <i class="fas fa-users-cog"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
                        <a href="javascript: void(0);" class="dropdown-item" onclick="handleMenuClick(this)" data-url="/profile">
                            <i class="fas fa-cog mr-2"></i> 资料修改
                        </a>
                        <a href="javascript: void(0);" class="dropdown-item" onclick="handleLogout()">
                            <i class="fas fa-arrow-circle-left mr-2"></i> 退出
                        </a>
                    </div>
                </li>
            </ul>
        </nav>
        <!-- /.navbar -->

        <!-- Main Sidebar Container -->
        <aside class="main-sidebar elevation-4 sidebar-dark-primary sidebar-monokai">
            <!-- Brand Logo -->
            <a href="/" class="brand-link">
                <img alt="Logo" class="brand-image img-circle elevation-3" style="opacity: .8;" th:src="${site.logo}"/>
                <span class="brand-text font-weight-light" th:text="${site.brand}"></span>
            </a>

            <!-- Sidebar -->
            <div class="sidebar">
                <!-- Sidebar user panel (optional) -->
                <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                    <div class="image">
                        <img src="/AdminLTE/dist/img/user4-128x128.jpg"
                             class="img-circle elevation-2" alt="User Image">
                    </div>
                    <div class="info">
                        <!--<a href="javascript: void(0"; class="d-block" sec:authentication="name">UNKNOWN</a>-->
                        <a href="javascript: void(0);" class="d-block" onclick="handleMenuClick(this)" data-url="/profile"
                           th:text="${user.getNickname() ?: user.getUsername() }">UNKNOWN</a>
                    </div>
                </div>

                <!-- Sidebar Menu -->
                <nav class="mt-2">
                    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                        <li class="nav-item"
                            th:each="item : ${menus}"
                            th:with="hasChild = ${item.children.size() > 0}"
                            th:classappend="${hasChild} ? 'has-treeview'">
                            <!-- Single Node -->
                            <a href="javascript: void(0);" class="nav-link" th:if="${!hasChild}" onclick="handleMenuClick(this)" th:data-url="${item.url}">
                                <i class="fas fa-location-arrow nav-icon"></i>
                                <p>[[${item.name}]]</p>
                            </a>
                            <!-- ./Single Node -->

                            <!-- Multiple Nodes-->
                            <a href="javascript: void(0);" class="nav-link" th:if="${hasChild}">
                                <!--<i class="fas fa-cogs nav-icon"></i>-->
                                <i class="fas fa-th-list nav-icon"></i>
                                <p>[[${item.name}]]<i class="fas fa-angle-left right"></i></p>
                            </a>
                            <ul class="nav nav-treeview" th:if="${hasChild}">
                                <li class="nav-item" th:each="child : ${item.children}">
                                    <a href="javascript: void(0);" class="nav-link" onclick="handleMenuClick(this)" th:data-url="${child.url}">
                                        <i class="fas fa-location-arrow nav-icon"></i>
                                        <p>[[${child.name}]]</p>
                                    </a>
                                </li>
                            </ul>
                            <!-- /Multiple Nodes-->
                        </li>
                    </ul>
                </nav>
                <!-- /.sidebar-menu -->
            </div>
            <!-- /.sidebar -->
        </aside>

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Main content -->
            <div class="content px-0">
                <!-- onload="handleOnload(this)" -->
                <iframe id="page-container" width="100%" class="border-0" style="background-color: #282923;" th:src="${site.dashboard}"></iframe>
            </div>
            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->
    </div>
    <!-- ./wrapper -->

    <!-- REQUIRED SCRIPTS -->
    <!-- jQuery -->
    <script src="/AdminLTE/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="/AdminLTE/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- overlayScrollbars -->
    <script src="/AdminLTE/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
    <!-- SweetAlert2 -->
    <script src="/AdminLTE/plugins/sweetalert2/sweetalert2.min.js"></script>
    <!-- AdminLTE App -->
    <script src="/AdminLTE/dist/js/adminlte.js"></script>

    <script type="text/javascript" src="/axios/dist/axios.min.js"></script>
    <script type="text/javascript" src="/assets/js/factory.js"></script>

    <script src="/assets/js/util.js"></script>
    <script type="text/javascript">
        let handleMenuClick, handleOnload, handleLogout;

        ($ => {
            const container = $('#page-container');

            const fixHeight = () => container.height($(window).height() - $('.main-header').outerHeight());

            fixHeight();
            window.onresize = fixHeight;

            handleMenuClick = el => {
                const oldURL = container.attr('src'), newURL = $(el).data('url');

                (newURL ? () => oldURL !== newURL && container.attr('src', newURL)
                    : () => Util.toast.fire({ icon: 'warning', title: 'Please check the menu url.' }))();
            };

            handleOnload = el => {
                const body = el.contentWindow.document.body;
                body.style.height = `${container.height()}px`;
                body.style.border = '1px solid red';
            };

            handleLogout = () => Factory.Request.post('/logout').finally(() => window.location.reload());
        })(jQuery)
    </script>
</body>
</html>
